<template>
    <div>

        <!-- 基础布局 -->
        <el-container class="body" style="height: 900px; border: 1px solid #eef1f6 ;">
            <!-- 顶栏容器 -->
            <el-header class="header" style="font-size: 60px; height: 80px; text-align: center ; ">
                个人财务管理系统
            </el-header>
            <hr>
            <!--  侧边栏+主题内容容器-->
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px" style="background-color: #eef1f6">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>收支管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">收入</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <!-- 主体展示界面 -->
                <el-main>
                    <!-- 绑定数据模型为：tableData -->
                    <el-table :data="tableData" boder class="tableData">
                        <el-table-column prop="mainId" label="收支id" width="120">
                        </el-table-column>

                        <el-table-column prop="costType" label="支出类型" width="120">
                        </el-table-column>

                        <el-table-column prop="costDetail" label="支出细分" width="120">
                        </el-table-column>

                        <el-table-column prop="costPrice" label="支出金额" width="120">
                        </el-table-column>

                        <el-table-column prop="createTime" label="创建时间" width="180">
                        </el-table-column>

                        <el-table-column prop="updateTime" label="更改时间" width="180">
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="modify(scope.row.mainId)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="deleteById(scope.row.mainId)">删除
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>

                    <!-- 添加数据 -->
                    <template>
                        <el-button class="btn_add" size="mini" type="primary" @click="
                        addFormBtn">添加数据
                        </el-button>
                    </template>

                    <!-- 添加数据的表单 -->
                    <el-dialog title="添加数据" :visible.sync="addFormVisible">
                        <el-form ref="form" :model="addForm" label-width="80px">

                            <!-- 支出类型 -->
                            <el-form-item label="支出类型">
                                <el-select v-model="addForm.costType" placeholder="请选择支出类型">
                                    <el-option v-for="(option,index) in formOptions.typeOptions " :key="index"
                                               :value="option" :label="option">
                                    </el-option>
                                </el-select>
                            </el-form-item>


                            <!-- 支出细分 -->
                            <el-form-item label="支出细分">
                                <el-select v-model="addForm.costDetail" placeholder="请选择细分类型">
                                    <el-option v-for="(option,index) in formOptions.detailOptions" :key="index"
                                               :value="option" :label="option">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <!-- 支出细分 -->
                            <el-form-item label="支出金额">
                                <el-input v-model="addForm.costPrice"></el-input>
                            </el-form-item>


                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>


                </el-main>

            </el-container>
        </el-container>
    </div>

</template>

<script>
import axios from 'axios' //axios异步请求库
export default {
    data() {
        return {
            tableData: [], //数据展示表格
            addFormVisible: false,
            // 表单中的选择项
            formOptions: {
                typeOptions: {},

                detailOptions: {}

            },

            //添加数据的表单
            addForm: {
                //一些默认值
                costType: '日常伙食',
                costDetail: '',
                costPrice: 5.6,
            }

        }
    },
    mounted() {
        axios.get('http://localhost:8080/getdata')
            .then(response => {
                // 请求成功的处理逻辑
                response = response.data.data
                this.tableData = response
            })
    },
    methods: {
        deleteById(index) {
            // 获取当前记录
            const item = this.tableData[index];
            const message = '该操作会删除该记录，确认吗'
            // 展开提示框
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',

            }).then(() => {
                console.log(item)
                this.$message({
                    type: 'success',
                    message: '删除成功!'

                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });

            })
        },
        modify: function () {

        },
        onSubmit: function () {
            console.log(this.addForm.costType)
            axios.post('http://localhost:8080/insertdata', this.addForm)
                .then(response => {

                    if (response.data.message == 'success') {
                        this.$message({
                            type: "success",
                            message: '添加数据成功！'

                        })

                    }

                })

        },
        addFormBtn: function () {
            this.addFormVisible = true; //弹出form表单

            // 获得支出类型和支出细分选项.
            axios.get('http://localhost:8080/getformoptions').then(response => {
                this.formOptions.detailOptions = response.data.data.costDetail
                this.formOptions.typeOptions = response.data.data.costType
            })
        }
    }
}
</script>

<style>
.wrapper {
}

.tableData {
    margin-bottom: 20px;
}

/* 添加数据按钮的装饰 */
.btn_add {
    font-size: 18px;

}
</style>